<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/yuezhang.css" />
  </head>
  <body>
    <!-- 主导航开始 -->
    <div class="header">
      <div class="header-in">
        <!-- logo -->
        <div class="logo">
          <img src="./images/logo_03.png" alt="" />
          <div class="flag-word">
            <strong>蓝莓派</strong>
            <h3>和音乐一起分享时光</h3>
          </div>
        </div>

        <!-- 主导航 -->
        <div class="main-nav">
          <ul>
            <li><a class="navs" href="./index.html">首页</a></li>
            <li><a class="navs on" href="./yuezhang.html">乐章</a></li>
            <li>
              <span class="ts-num">12</span
              ><a class="navs" href="./tingshuo.html">听说</a>
            </li>
            <li><a class="navs" href="./chat.html">聊聊</a></li>
            <li><a class="navs" href="./chengpin.html">诚品</a></li>
            <li><a class="navs" href="./blueberryjam.html">蓝莓酱</a></li>
          </ul>
        </div>

        <!-- 搜索和登录注册 -->
        <div class="login">
          <div class="search">
            <form>
              <input type="search" id="search" />
              <label for="search" id="search-button"></label>
            </form>
          </div>
          <div class="login-register">
            <a href="./login.html" class="login">登录</a>
            <a href="./login.html" class="register">注册</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 主导航结束 -->

    <!-- 内容主容器 -->
    <div class="main">
      <!-- 歌曲信息开始 -->
      <div class="song-introduce">
        <div class="song-info">
          <div class="song-title"><a href="#">这里是标题</a></div>
          <div class="play-num"><span>43万</span>播放</div>
        </div>
        <div class="song-details">
          <img src="./images/naying.png" alt="" />
          <div class="song-intro-content">这是介绍</div>
        </div>
        <div class="song-control">
          <div class="playutil">
            <audio src="./res/mo.mp3" id="audio"></audio>
            <div class="control">
              <div class="buttons">
                <a href="#" id="playBtn">
                  <img id="playImg" src="./images/play-btn_03.png" alt="" />
                </a>
              </div>
            </div>
            <p id="passTime">00:00</p>
            <div class="pogress-bar">
              <div class="pogress-bar-passed"></div>
            </div>
            <p id="totalTime">00:00</p>
          </div>
        </div>
      </div>
      <!-- 歌曲信息结束 -->

      <!-- 文章开始 -->
      <div class="common-details">
        <div class="artical">
          <div class="artical-title">
            <h3 class="artical-title-h3">这里是标题</h3>
            <div class="artical-title-info">
              <div class="eye-wechat">
                <span class="eye-num">80</span>
                <span class="wechat-num">20</span>
              </div>
              <div class="create-time">
                创建时间：
                <span class="current-date">2030年2月30日</span>
              </div>
            </div>
          </div>
          <div class="artical-content">
            <div class="blog-details">
              <div class="blog-details-content">
                <!-- 文章内容本身 -->
              </div>
              <div class="blog-details-labels">
                <span class="label">旅游</span>
                <span class="label">咨询</span>
                <span class="label">穷游</span>
              </div>
              <div class="blog-details-end">
                <img src="./images/endIcon_03.png" alt="" />
              </div>
            </div>

            <!-- 相关阅读开始 -->
            <div class="related-read">
              <div class="related-read-title">
                <a href="#">相关阅读</a>
              </div>
              <div class="related-read-content">
                <!-- <div class="related-read-content-show">
                  <a href="#">
                    <img
                      class="related-read-pic"
                      src="./images/related-read_03.png"
                      alt=""
                    />
                    <p class="related-read-summary">这是描述</p>
                  </a>
                </div> -->
              </div>
              <div class="related-read-share">
                <div class="share-left">
                  <div class="share-left-icon">
                    <a href="#"
                      ><img src="./images/shareIcon_03.png" alt=""
                    /></a>
                    <a href="#"
                      ><img src="./images/shareIcon_05.png" alt=""
                    /></a>
                    <a href="#"
                      ><img src="./images/shareIcon_07.png" alt=""
                    /></a>
                    <a href="#"
                      ><img src="./images/shareIcon_09.png" alt=""
                    /></a>
                  </div>
                  <span>分享给好友</span>
                </div>
                <div class="share-right">
                  <a href="#">分享微博</a>
                  <a href="#">
                    <img src="./images/zan-big_03.png" alt="" />
                    赞一个 <span class="blog-zan-num">45</span>
                  </a>

                  <a href="#">
                    <img src="./images/favorites_03.png" alt="" />
                    收藏
                  </a>
                  <a href="#" class="report"> 举报 </a>
                </div>
              </div>
            </div>
            <!-- 相关阅读结束 -->

            <!-- 评论开始 -->
            <div class="blog-comment">
              <div class="who-zan">
                <h4>赞过的人</h4>
                <div class="who-zan-list">
                  <div class="who-zan-people">
                    <img src="./images/tupian_07.png" alt="" />
                    <span class="who-zan-people-name">许西</span>
                  </div>
                  <div class="who-zan-people">
                    <img src="./images/tupian_07.png" alt="" />
                    <span class="who-zan-people-name">颤三</span>
                  </div>
                  <div class="who-zan-people">
                    <img src="./images/tupian_07.png" alt="" />
                    <span class="who-zan-people-name">李四</span>
                  </div>
                  <div class="who-zan-people">
                    <img src="./images/tupian_07.png" alt="" />
                    <span class="who-zan-people-name">许西</span>
                  </div>
                </div>
              </div>
              <div class="theme-pic">
                <a href="#"><img src="./images/comment-pic_03.png" alt="" /></a>
              </div>
              <div>
                <div>评论框</div>
                <div class="ts-popcomment">
                  <span class="ts-popcomment-icon">
                    <img src="./images/listenSpeak/touxiang.png" alt="" />
                  </span>
                  <div class="ts-comment-content">
                    <b>小夏同学</b>
                    <i>2030-12-12 16:30:30</i>
                    <p>
                      内地流行双人组合[牛奶咖啡]，不久前为新专辑MV的拍摄，专程来到了龙井一所大房
                    </p>
                    <span class="ts-card-foot-icon">
                      <b class="ts-card-icon-1"></b>
                      <i>34</i>
                      <b class="ts-card-icon-2"></b>
                      <i>50</i>
                    </span>
                  </div>
                </div>
                <div class="ts-popcomment">
                  <span class="ts-popcomment-icon">
                    <img src="./images/listenSpeak/touxiang.png" alt="" />
                  </span>
                  <div class="ts-comment-content">
                    <b>小夏同学</b>
                    <i>2030-12-12 16:30:30</i>
                    <p>
                      内地流行双人组合[牛奶咖啡]，不久前为新专辑MV的拍摄，专程来到了龙井一所大房
                    </p>
                    <span class="ts-card-foot-icon">
                      <b class="ts-card-icon-1"></b>
                      <i>34</i>
                      <b class="ts-card-icon-2"></b>
                      <i>50</i>
                    </span>
                  </div>
                </div>
                <div class="ts-popcomment">
                  <span class="ts-popcomment-icon">
                    <img src="./images/listenSpeak/touxiang.png" alt="" />
                  </span>
                  <div class="ts-comment-content">
                    <b>小夏同学</b>
                    <i>2030-12-12 16:30:30</i>
                    <p>
                      内地流行双人组合[牛奶咖啡]，不久前为新专辑MV的拍摄，专程来到了龙井一所大房
                    </p>
                    <span class="ts-card-foot-icon">
                      <b class="ts-card-icon-1"></b>
                      <i>34</i>
                      <b class="ts-card-icon-2"></b>
                      <i>50</i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 评论结束 -->
          </div>
        </div>

        <!-- 侧边栏开始 -->
        <div class="artical-right">
          <div class="msg-center aside-box">
            <div class="msg-center-up">
              <div class="blueberrypai-icon">
                <img src="./images/aside-logo_03.png" alt="" />
                <h3>蓝莓派</h3>
              </div>
              <div class="square-btn">
                <p class="tiezi-num">20</p>
                <p class="tiezi-name">帖子</p>
              </div>
              <div class="square-btn">
                <p class="tiezi-num">20</p>
                <p class="tiezi-name">评论</p>
              </div>
              <div class="square-btn">
                <p class="tiezi-num">20</p>
                <p class="tiezi-name">关注</p>
              </div>
            </div>
            <div class="msg-center-down">
              <div class="circle-btn add"><a href="#"></a></div>
              <div class="circle-btn msg"><a href="#"></a></div>
            </div>
          </div>
          <div class="other-blog aside-box">
            <h3 class="other-blog-title">相关文章</h3>
            <ul class="blog-list">
              <li><a href="#">这是其他文章的文本信息</a></li>
              <li><a href="#">这是其他文章的文本信息</a></li>
              <li><a href="#">这是其他文章的文本信息</a></li>
              <li><a href="#">这是其他文章的文本信息</a></li>
            </ul>
          </div>
          <div class="hot-recommend aside-box">
            <h3 class="other-blog-title">热门推荐</h3>
            <ul class="blog-list">
              <li><a href="#">热门推荐内容</a></li>
              <li><a href="#">热门推荐内容</a></li>
              <li><a href="#">热门推荐内容</a></li>
              <li><a href="#">热门推荐内容</a></li>
            </ul>
          </div>
        </div>
        <!-- 侧边栏结束 -->
      </div>
      <!-- 文章结束 -->
    </div>
    <!-- 内容主容器 -->

    <!-- 底部开始 -->
    <div class="footer">
      <div class="blin-content">
        <div class="link-left">
          <span>友情链接</span>
          <p class="link-left-content">
            <a href="#">乐视</a>
            <a href="#">数字尾巴</a>
            <a href="#">豆瓣</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
          </p>
        </div>
        <div class="link-right">
          <div class="weibo">
            <img src="./images/footer-ewm1.jpg" alt="" />
            <span>微博二维码</span>
          </div>

          <div class="weixin">
            <img src="./images/footer-ewm2.jpg" alt="" />
            <span>微信二维码</span>
          </div>

          <div class="connect">
            <p>电话：88888888</p>
            <p><i>邮编：100100</i><i>传真：898888888</i></p>
            <p>邮箱：info@newworlrours.cn</p>
            <p>地址：不会告诉你的</p>
          </div>
        </div>
      </div>

      <div class="bottom">
        <div class="bot-content">
          <span><a href="#">关于我们</a></span>
          <span><a href="#">联系我们</a></span>
          <span><a href="#">加入我们</a></span>
          <span><a href="#">团队成员</a></span>
          <span><a href="#">商务合作</a></span>
          <p class="bot-footer"><em>蓝莓派版权所有</em><em>备案号</em></p>
        </div>
      </div>
    </div>
    <!-- 底部结束 -->

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/yuezhang.js"></script>
  </body>
</html>
